<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webgl</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="650" height="650"></canvas>
  </body>
  <script src="./init.js"></script>
  <script>
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");

    // 设置画布颜色
    gl.clearColor(1.0, 1.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 顶点着色器
    const vertexShader = `
        attribute vec4 a_position;
        void main () {
            gl_Position = a_position;
            gl_PointSize = 10.0;
        }  
    `;

    // 片元着色器
    const fragmentShader = `
        precision mediump float;
        void main () {
            gl_FragColor = vec4(1.0, 0.5, 1.0, 1.0);
        }
    `;

    // 初始化
    const program = initWebGL(gl, vertexShader, fragmentShader);
    gl.useProgram(program);

    // 自定义数据
    const pointPos = [0.0, 0.0, 1.0, 1.0, -1.0, -1.0];
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pointPos), gl.STATIC_DRAW);

    // 获取数据
    const a_position = gl.getAttribLocation(program, "a_position");
    gl.vertexAttribPointer(
      a_position,
      2, // 每组数据的长度
      gl.FLOAT,
      false,
      Float32Array.BYTES_PER_ELEMENT * 2, // 每组数据的总长度
      0 // 每组数据的开始下标
    );

    // 绘制数据
    gl.enableVertexAttribArray(a_position);
    gl.drawArrays(gl.POINTS, 0, 3); // 绘制几组数据
  </script>
</html>
